<template>
    <div class="template-newLaw-Lu">
        <a-modal
            title=""
            :footer="false"
            :visible="editTableVisible"
            :maskClosable="false"
            :closable="true"
            :destroyOnClose="true"
            width="100%"
            :dialog-style="{ margin: '0 auto' }"
            wrapClassName="newLaw-modal-Lu"
            @cancel="closeVisible">
            <a-tabs type="card" default-active-key="1" v-model="activeKey" @change="callback">
                <a-tab-pane v-for="(item,index) in tabList" :key="index.toString()" :tab="item.ffgjc">
                    <div class="editLaws-tab-div">
                        <div class="editLaws-tab-Title">
                            法规名称：
                            <span>{{ item.ffgmc }}</span>
                            <a-button @click="editFfgmc(item)" class="blue-btn" style="margin-left:20px;margin-right: 10px;">编辑</a-button>
                            <a-button class="red-btn" @click="delFlfg(item.id)">删除</a-button>
                        </div>
                        <div class="editLaws-tab-Content">
                            <div class="editLaws-tab-Content-left">
                                <h3>章节目录</h3>
                                <a-button @click="addaddZjml(item.id)">添加章节</a-button>
                                <div>
                                    <a-tree
                                        v-if="treeData.length"
                                        :treeData="treeData"
                                        :autoExpandParent="true"
                                        :defaultExpandAll="true"
                                        @select="onSelect($event,index)"
                                        :selectedKeys="selectedKeys"
                                        :default-selected-keys="[treeData[0].key]"
                                    >
                                        <template slot="custom" slot-scope="item">
                                            <span>{{ item.title }}</span>
                                            <a-tooltip>
                                                <template slot="title">
                                                    新增下级
                                                </template>
                                                <a-icon @click="addNextZjml(item)" type="plus-circle" />
                                            </a-tooltip>
                                            <a-tooltip>
                                                <template slot="title">
                                                    编辑
                                                </template>
                                                <a-icon @click="updateZjml(item)" type="edit" />
                                            </a-tooltip>
                                            <a-popconfirm
                                                    title="确定要删除该章节吗？"
                                                    ok-text="确定"
                                                    cancel-text="取消"
                                                    @confirm="delZjml(item)"
                                                    @cancel="cancel"
                                                >
                                                <a-tooltip>
                                                    <template slot="title">
                                                        删除
                                                    </template>
                                                    <a-icon type="delete" />
                                                </a-tooltip>
                                            </a-popconfirm>

                                        </template>
                                    </a-tree>
                                </div>
                            </div>
                            <div class="editLaws-tab-Content-right">
                                <a-tabs type="card" @change="rightCallback">
                                    <a-tab-pane key="1" tab="条款">
                                        <commpVxeTable
                                            :isCanWrap="true"
                                            :occupancyHeight="150"
                                            :key="tiaokuanVxeTable"
                                            :config="tiaokuanDataTableConfig"
                                            :columns="tiaokuanColumnsVxe"
                                            :formItem="tiaokuanFormItem"
                                            ref="tiaokuanTableRef"
                                            @searchEvent="tiaokuanSearchEvent"
                                            @resetEvent="tiaokuanResetEvent"
                                            >
                                            <template v-slot:externalOperations="{data}">
                                                <vxe-form-item>
                                                    <template>
                                                        <a-button class="blue-btn" @click="addTK(item.id)" style="margin-right:20px;">添加</a-button>
                                                    </template>
                                                </vxe-form-item>
                                            </template>
                                            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                                                <a-form layout="inline">
                                                    <a-form-item>
                                                        <a-button @click="editTk(row)" class="blue-btn">编辑</a-button>
                                                    </a-form-item>
                                                    <a-form-item>
                                                        <a-popconfirm
                                                            title="您确定要删除当前条款吗?"
                                                            ok-text="确定"
                                                            cancel-text="取消"
                                                            @confirm="delTk(row)"
                                                            @cancel="cancel"
                                                            >
                                                            <a-button class="red-btn">删除</a-button>
                                                        </a-popconfirm>
                                                    </a-form-item>
                                                </a-form>
                                            </template>
                                        </commpVxeTable>
                                    </a-tab-pane>
                                    <a-tab-pane key="2" tab="描述模板">
                                        <commpVxeTable
                                            :isCanWrap="true"
                                            :occupancyHeight="150"
                                            :key="mubanVxeTable"
                                            :config="mubanDataTableConfig"
                                            :columns="mubanColumnsVxe"
                                            :formItem="mubanFormItem"
                                            ref="mubanTableRef"
                                            @searchEvent="mubanSearchEvent"
                                            @resetEvent="mubanResetEvent"
                                            >
                                            <template v-slot:externalOperations="{data}">
                                                <vxe-form-item>
                                                    <template>
                                                        <a-button class="blue-btn" @click="addMB(item.id)" style="margin-right:20px;">添加</a-button>
                                                    </template>
                                                </vxe-form-item>
                                            </template>
                                            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                                                <a-form layout="inline">
                                                    <a-form-item>
                                                        <a-button class="blue-btn" @click="editMb(row,item.id)">编辑</a-button>
                                                    </a-form-item>
                                                    <a-form-item>
                                                        <a-popconfirm
                                                            title="您确定要删除当前模板吗?"
                                                            ok-text="确定"
                                                            cancel-text="取消"
                                                            @confirm="delMb(row)"
                                                            @cancel="cancel"
                                                            >
                                                            <a-button class="red-btn">删除</a-button>
                                                        </a-popconfirm>
                                                    </a-form-item>
                                                </a-form>
                                            </template>
                                        </commpVxeTable>
                                    </a-tab-pane>
                                </a-tabs>
                            </div>
                        </div>
                    </div>
                </a-tab-pane>
                <a-button
                    slot="tabBarExtraContent"
                    class="addTab-btn"
                    @click="addClick">
                    新增
                </a-button>
            </a-tabs>
        </a-modal>
        <addAndEditModal ref="addAndEditModalRef" :modaObj="modaObj" @getData="getData" @getTreeData="getTreeData"></addAndEditModal>
    </div>
</template>
<script>
import  assessCheckApi  from './service/api.js'
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import addAndEditModal from './addAndEdit'
import {queryListFgByZdwjId,queryListZjTreeByFgId,queryPageTkListByZjId,queryPageMbListByZjId,
        deleteFgmc,updateFgmc,addZjml,addZjmlInSub,deleteZjml,deleteTk,deleteMsmb} from './service/index'
export default {
    components: {
        commpVxeTable,addAndEditModal
    },
    props: {
        tableData:{
            type:[Array,Object],
            default: () => {},
            required:false
        }
    },
    data() {
        return {
            editTableVisible: false,
            tabList: [],
            treeData: [],
            tableItem: {},
            title: {
                isInput: false,
                ffgmc: '',
                isEdit: '编辑'
            },
            fzdwjid: '',
            fzjid: '',
            selectedKeys: [],
            modaObj: {},
            tabsKey: 0,
            activeKey: '0',
            fzjidList: [],
            // ---
            tiaokuanVxeTable: '',
            tiaokuanDataTableConfig: {
                api: assessCheckApi.queryPageTkListByZjId,
                rowId: 'id',
                paramet: {
                    fzjid: '',
                }
            },
            tiaokuanColumnsVxe: [
                {
                    title: '指导原则号',
                    field: 'fzdyzh',
                    width: 150,
                },{
                    title: '指导原则内容',
                    field: 'fzdyznr',
                    align: 'left'
                },{
                    title: '审评要点',
                    field: 'fjcyd',
                },{
                    title: '操作',
                    field: 'id',
                    width: 200,
                    slots: {
                        default: 'operation_btn'
                    }
                },
            ],
            tiaokuanFormItem: [
                {
                    label: '审评要点',
                    model: 'fjcyd',
                },{
                    label: '指导原则内容',
                    model: 'fzdyznr',
                },
            ],
            // ---
            mubanVxeTable: '',
            mubanDataTableConfig: {
                api: assessCheckApi.queryPageMbListByZjId,
                rowId: 'id',
                paramet: {
                    fzjid: '',
                }
            },
            mubanColumnsVxe: [
                {
                    title: '来源',
                    field: 'fly',
                },{
                    title: '描述模版',
                    field: 'fmsmb',
                    align: 'left'
                },{
                    title: '使用次数',
                    field: 'fsycs',
                    width: 100,
                },{
                    title: '操作',
                    field: 'id',
                    width: 200,
                    slots: {
                        default: 'operation_btn'
                    }
                },
            ],
            mubanFormItem: [
                {
                    label: '来源',
                    model: 'fly',
                },{
                    label: '描述模版',
                    model: 'fmsmb',
                },
            ],
            replaceFields: {
            children: 'children', title: 'orgName', key: 'id'
            },
        }
    },
    methods: {
        closeVisible(){
            this.editTableVisible = false
            this.fzjidList = []
            this.tabList = []
            this.treeData = []
            this.selectedKeys = []
            this.tabsKey = 0
            this.fzdwjid = ''
            this.fzjid = ''
            this.$emit('newTableData')
        },
        callback(key) {
            //console.log(key);
            //console.log(this.tabList[key])
            this.tabsKey = key
            this.getTreeData(this.tabList[key].id)
        },
        rightCallback(key){
            //console.log(key);
        },
        getData(id){
            //console.log('刷新')
            queryListFgByZdwjId({fzdwjid:id}).then(res => {
                if(res.code == 200){
                    //console.log(res)
                    this.tabList = res.result
                    //console.log('this.tabList',this.tabList)
                    // this.callback(0)
                    //console.log('tabsKey',this.tabsKey)
                    //console.log('idd',this.tabList[this.tabsKey].id)
                    for (var i  = 0;i < this.tabList.length;i++) {
                        this.fzjidList[i] = {
                            fzjid: ''
                        }
                    }
                    this.getTreeData(this.tabList[this.tabsKey].id)
                }
            })
        },
        getTreeData(id){
            queryListZjTreeByFgId({ffgid:id}).then(res => {
                if(res.code == 200){
                    //console.log(res)
                    this.treeData = res.result
                    if(res.result.length !== 0){
                        // res.result.forEach(item => {
                        //     item = {
                        //         ...item,
                        //         scopedSlots: { title: 'custom' },
                        //     }
                        //     this.treeData.push(item)
                        // })
                        // //console.log(this.treeData)
                        // this.tableItem = this.treeparamet.fzjid = this.treeData[0].id
                        // ------------------------
                        if(this.fzjidList[this.tabsKey].fzjid !== ''){
                            // this.tiaokuanDataTableConfig.paramet.fzjid = this.selectedKeys[0]
                            // this.mubanDataTableConfig.paramet.fzjid = this.selectedKeys[0]
                            this.tiaokuanDataTableConfig.paramet.fzjid = this.fzjidList[this.tabsKey].fzjid
                            this.mubanDataTableConfig.paramet.fzjid = this.fzjidList[this.tabsKey].fzjid

                        } else {
                            this.tiaokuanDataTableConfig.paramet.fzjid = this.treeData[0].id
                            this.mubanDataTableConfig.paramet.fzjid = this.treeData[0].id
                        }
                    } else {
                        this.tiaokuanDataTableConfig.paramet.fzjid = ''
                        this.mubanDataTableConfig.paramet.fzjid = ''
                    }
                    this.tiaokuanVxeTable = Date.now()
                    this.mubanVxeTable = Date.now()
                }
            })
        },
        onSelect(selectedKeys,index) {
            //console.log('selectedKeys', selectedKeys);
            // //console.log('info', info);
            //console.log('index', index);
            if (selectedKeys.length === 0) {
                return
            }
            else {
                this.fzjid = selectedKeys[0]
                this.fzjidList[this.tabsKey].fzjid = selectedKeys[0]

                this.selectedKeys = selectedKeys
                this.$emit('onSelect', this.selectedKeys[0], index)
            }


            this.tiaokuanDataTableConfig.paramet.fzjid = selectedKeys[0]
            this.mubanDataTableConfig.paramet.fzjid = selectedKeys[0]
            this.tiaokuanVxeTable = Date.now()
            this.mubanVxeTable = Date.now()
        },
        // ---
        tiaokuanSearchEvent(){
            this.tiaokuanDataTableConfig.paramet = {
                ...this.tiaokuanDataTableConfig.paramet,
            }
        },
        tiaokuanResetEvent(){
            this.tiaokuanDataTableConfig.paramet = {
                ...this.tiaokuanDataTableConfig.paramet,
            }
        },
        // ---
        mubanSearchEvent(){
            this.mubanDataTableConfig.paramet = {
                ...this.mubanDataTableConfig.paramet,
            }
        },
        mubanResetEvent(){
            this.mubanDataTableConfig.paramet = {
                ...this.mubanDataTableConfig.paramet,
            }
        },
        // ----
        editFfgmc(item){
            //console.log(item)
            this.modaObj = {
                title: '编辑法律法规',
                type: 1,
                fzdwjid: item.fzdwjid,
                formData: {...item}
            }
            this.$nextTick(_=> {
                this.$refs.addAndEditModalRef.addAndEditVisible = true
            })
        },
        editFfgmcs(item,index){
            if(item.isEdit == '编辑'){
                this.tabList[index].isInput = true
                this.tabList[index].isEdit = '保存'
            } else if(item.isEdit == '保存') {
                this.tabList[index].isInput = false
                this.tabList[index].isEdit = '编辑'
                let data = {
                    id: item.id,
                    ffgmc: item.ffgmc
                }
                updateFgmc(data).then(res => {
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.getTreeData(item.id)
                    } else {
                        this.$message.warning(res.message)
                    }
                })
            }
        },
        addClick(){
            // this.$nextTick(_=> {
            //     this.$refs.addTabModalRef.addtabVisible = true
            // })
            this.modaObj = {
                title: '新增法律法规',
                type: 1,
                fzdwjid: this.fzdwjid
            }
            this.$nextTick(_=> {
                this.$refs.addAndEditModalRef.addAndEditVisible = true
            })
        },
        addaddZjml(id){
            this.modaObj = {
                title: '新增法律法规章节',
                ffgid: id,
                type: 2,
            }
            this.$nextTick(_=> {
                this.$refs.addAndEditModalRef.addAndEditVisible = true
            })
        },
        delFlfg(ids){
            var that = this
            that.$confirm({
                title: '您确定要删除当前法律法规吗?',
                content: '',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    deleteFgmc({id:ids}).then(res => {
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.getData(that.fzdwjid)
                            that.tabsKey = 0
                            that.activeKey = '0'
                            // that.callback(0)
                            that.getTreeData(that.tabList[0].id)
                        } else {
                            that.$message.warning(res.message)
                        }
                    })
                },
                onCancel() {
                    //console.log('Cancel');
                },
            });
        },
        delZjml(item){
            //console.log(item)
            deleteZjml({id:item.id}).then(res => {
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.getTreeData(item.ffgid)
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        // 添加条款
        addTK(id){
            if(this.fzjid == ''){
                this.$message.warning('请点击左侧，选择章节')
            } else {
                this.modaObj = {
                    title: '新增法律法规条款',
                    type: 4,
                    ffgid: id,
                    fzjid: this.fzjid,
                }
                this.$nextTick(_=> {
                    this.$refs.addAndEditModalRef.addAndEditVisible = true
                })
            }
        },
        // 编辑条款
        editTk(row){
            //console.log(row)
            this.modaObj = {
                title: '编辑法律法规条款',
                type: 4,
                ffgid: row.ffgid,
                fzjid: row.fzjid,
                id: row.id,
                formData: {...row}
            }
            this.$nextTick(_=> {
                this.$refs.addAndEditModalRef.addAndEditVisible = true
            })
        },
        // 添加模板
        addMB(id){
            if(this.fzjid == ''){
                this.$message.warning('请点击左侧，选择章节')
            } else {
                this.modaObj = {
                    title: '新增法律法规描述模版',
                    type: 5,
                    ffgid: id,
                    fzjid: this.fzjid,
                }
                this.$nextTick(_=> {
                    this.$refs.addAndEditModalRef.addAndEditVisible = true
                })
            }
        },
        // 编辑模板
        editMb(row,id){
            this.modaObj = {
                title: '编辑法律法规描述模版',
                type: 5,
                ffgid: id,
                formData: {...row}
            }
            this.$nextTick(_=> {
                this.$refs.addAndEditModalRef.addAndEditVisible = true
            })
        },
        //
        addNextZjml(item){
            //console.log(item)
            this.modaObj = {
                title: '新增下级法律法规章节',
                type: 3,
                ffgid: item.ffgid,
                ffzjid: item.id
            }
            this.$nextTick(_=> {
                this.$refs.addAndEditModalRef.addAndEditVisible = true
            })
        },
        //
        updateZjml(item){
            //console.log(item)
            this.modaObj = {
                title: '编辑法律法规章节',
                type: 2,
                ffgid: item.ffgid,
                id: item.id,
                formData: {
                    forder: item.forder,
                    fzjjc: item.fzjjc,
                    fzjmc: item.fzjmc
                }
            }
            this.$nextTick(_=> {
                this.$refs.addAndEditModalRef.addAndEditVisible = true
            })
        },
        // 删除条款
        delTk(row){
            deleteTk({id:row.id}).then(res => {
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.tiaokuanDataTableConfig.paramet.fzjid = row.fzjid
                    this.tiaokuanVxeTable = Date.now()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        // 删除模板
        delMb(row){
            deleteMsmb({id:row.id}).then(res => {
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.mubanDataTableConfig.paramet.fzjid = row.fzjid
                    this.mubanVxeTable = Date.now()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        cancel(e) {
            //console.log(e);
        },
    },
    watch: {
        tableData(newval,oldVal){
            //console.log(newval,oldVal)
            this.fzdwjid = newval.id
            this.getData(newval.id)
        },
        treeData: {
            handler() {
                // //console.log("变更========", this.treeData);
                findColorText(this.treeData)
                function findColorText(obj) {
                    for (var i in obj) {
                        obj[i] = {
                            ...obj[i],
                            scopedSlots: { title: 'custom' },
                        }
                        if(obj[i].children.length > 0){
                            //console.log('222',obj[i])
                            findColorText(obj[i].children)
                        }
                    }
                    // //console.log(obj)
                }
            }
        },
        deep: true
    },
}
</script>
<style>
    @import url('../css/newLaw.css');
</style>
